<template>
	<view class="user_page">
		<view class="uesr_top">
			<view class="icon">
				<uni-icons type="gear" color="#ffffff" size="25" @click="goToSet"></uni-icons>
			</view>
			<view class="info">
				<image class="user_img" src="https://yun.xssbdc.com/group1/M00/00/02/rBiDGl9jB1WAS_ptAAAnsAa132k614.png"></image>
				<view  v-if="userInfo.haveName">
					您好! <text class="user_name">{{userInfo.name}}</text>
				</view>
				<view v-else>
					<text  @click="togglePopup">点击设置昵称</text>
				</view>
			</view>
		</view>
		<view class="user_card">
			<view class="title">总收入<text class="wd">（具体发放以财务为准）</text></view>
			<view class="number">{{countData.totalMoney || 0}}</view>
			<view class="fool">
				<view class="left">
					结算中收入: <text class="red">￥{{countData.accountMoney || 0}}</text>
				</view>
				<view class="left">
					已交付收入: <text class="red">￥{{countData.provideMoney || 0}}</text>
				</view>
			</view>
		</view>
		<view class="user_bar_title">
			我的收入订单
		</view>
		<view style="flex: 1; overflow: hidden;">
			<scroll-view class="scroll-v list order_list" scroll-y @scrolltolower="loadMore()">
				<view class="order_item" v-for="item in orderData" :key="item.id">
					<view class="line">
						<view class="order_num">{{item.orderNumber}}</view>
						<view class="date">{{item.offDay == 0? "今天": item.offDay + "天前"}}</view>
					</view>
					<view class="line">
						<view class="name">
							{{item.productModelName}}
						</view>
						<view class="total">
							+{{item.totalMoney||0}}
						</view>
					</view>
				</view>
				<view class="loading-more">
					<text class="loading-more-text">{{loadText}}</text>
				</view>
			</scroll-view>
		</view>
		<uni-popup ref="showtip" type="center" :mask-click="false">
			<view class="uni-tip">
				<text class="uni-tip-title">修改昵称</text>
				<view class="uni-tip-content">
					<input type="text" placeholder="添加昵称" v-model="addName" />
				</view>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button border-r" @click="cancel('tip')">取消</text>
					<text class="uni-tip-button" style="color: #007aff;" @click="addNewName">确定</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				type: '',
				loadText: "加载更多...",
				loadMoreStatus: true,
				pageNo: 1,
				pageSize: 30,
				countData:{
					totalMoney:0,
					accountMoney: 0,
					provideMoney: 0
				},
				orderData: [],
				addName: ""
			}
		},
		computed: {
			...mapState(["userInfo"]),
		},
		onLoad() {
			this.getUserCount();
			this.getUserOrder();
		},
		//上拉刷新
		onPullDownRefresh() {
			this.orderData = [],
			this.loadText = "加载更多...",
			this.loadMoreStatus = true,
			this.pageNo = 1,
			this.pageSize = 30,
			this.getUserCount();
			this.getUserOrder();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			togglePopup() {
				this.$refs.showtip.open()
			},
			cancel(type) {
				this.$refs.showtip.close()
			},
			addNewName() {
				let that = this;
				let perfectAgent = {};
				perfectAgent.name = this.addName;
				perfectAgent.id = this.userInfo.id;
				this.$api.changeName(perfectAgent).then(res=> {
					if(res.data.code == 200){
						let userObj = JSON.parse(JSON.stringify(that.userInfo))
						userObj.name = this.addName;
						userObj.haveName = true;
						that.$store.commit("SET_USERINFO", userObj );
						that.cancel("tip")
					}
				}).catch( err => {
					console.log(err)
					that.cancel("tip")
				})
			},
			//获取收入状况
			getUserCount() {
				this.$api.getUserCount().then(res=>{
					this.countData = res.data.data;
				})
			},
			//获取收入订单
			getUserOrder(obj) {
				let parmas = {};
				if(obj){
					parmas.pageNo = obj.pageNo || 0;
					parmas.pageSize = obj.pageSize || 10;
				}else{
					parmas = "";
				};
				this.$api.getUserOrder(parmas).then( res => {
					this.orderData = this.orderData.concat(res.data.data);
					if(res.data.data.length<10){
						this.loadText = "没有更多数据了";
						this.loadMoreStatus = false;
					}
				})
			},
			//加载更多
			loadMore(){
				setTimeout(() => {
				   let parmas = {};
				   if(this.loadMoreStatus){
				   	this.pageNo = this.pageNo +1;
				   	parmas.pageNo = this.pageNo;
				   	parmas.pageSize = this.pageSize;
				   	this.getUserOrder(parmas);
				   }
				}, 500)
			},
			//点击设置
			goToSet() {
				uni.navigateTo({
					url:"/pages/userSet/userSet"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	/* #ifndef APP-PLUS */
	page {
	    width: 100%;
		height: 100%;
	    min-height: 100%;
	}
	/* #endif */
	.user_page{
		display: flex;
		background: #f8f8f8;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
		/* #ifdef MP-ALIPAY || MP-BAIDU ||  APP-PLUS */
		height: 100vh;
		/* #endif */
	}
	.uesr_top {
		width: 100%;
		height: 400rpx;
		background: url("https://yun.xssbdc.com/group1/M00/00/02/rBiDGl9jB46AWlhGAAA25WEXIb4237.png") no-repeat;
		background-size: 100%;
		// #ifdef APP-PLUS
			padding-top: var(--status-bar-height);
		// #endif
		// #ifndef APP-PLUS
			padding-top: 40rpx;
		// #endif
		flex-shrink: 0;
	}
	.uesr_top .icon{
		height: 44rpx;
		text-align: right;
		padding-right: 30rpx;
		line-height: 44rpx;
		float: right;
	}
	.info{
		width: 100%;
		height: 140rpx;
		padding: 15rpx 30rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: #FFFFFF
	}
	.user_img{
		width: 110rpx;
		height: 110rpx;
		overflow: hidden;
		border-radius: 50%;
		margin-right: 16rpx;
	}
	.user_name{
		margin-left: 16rpx;
	}
	.user_card{
		width: 690rpx;
		height: 280rpx;
		background-color: #ffffff;
		border-radius: 24rpx;
		margin: -110rpx auto 0;
		padding: 42rpx 48rpx;
	}
	.user_card .title{
		font-size: 16px;
		line-height: 20px;
		color: #333333;
	}
	.user_card .wd{
		font-size: 12px;
	}
	.user_card .number{
		font-family: DIN-Bold;
		font-size: 38px;
		font-weight: bold;
		font-stretch: normal;
		line-height: 120rpx;
		color: #333333;
	}
	.fool{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 12px;
		line-height: 20px;
		color: #333333;
	}
	.fool .left{
		flex: 1;
	}
	.user_bar_title{
		height: 110rpx;
		padding: 0 30rpx;
		line-height: 110rpx;
		font-size: 32rpx;
		color: #333333;
	}
	.scroll-v {
	    height: 100%;
	    /* #ifndef MP-ALIPAY */
	    flex-direction: column;
	    /* #endif */
	    width: 750rpx;
	}
	.order_item{
		border-radius: 8rpx;
		height: 150rpx;
		width: 690rpx;
		margin: 0 30rpx 24rpx;
		padding: 28rpx 24rpx;
		background: #ffffff;
		display: flex;
		flex-direction: column;
	}
	.order_item .line{
		flex: 1;
		width: 100%;
		height: 32rpx;
		line-height: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #999999;
		font-size: 26rpx;
	}
	.order_item .name{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}
	.order_item .total{
		font-family: DIN-Bold;
		font-size: 38rpx;
		font-weight: bold;
		letter-spacing: 0px;
		color: #ff3347;
	}
	.loading-more {
	    align-items: center;
	    justify-content: center;
	    padding-top: 10px;
	    padding-bottom: 10px;
	    text-align: center;
	}
	
	.loading-more-text {
	    font-size: 28rpx;
	    color: #999;
	}
</style>
